<template>
  <div class="cineam-search">
    <van-search
      v-model="searchText"
      show-action
      label=""
      placeholder="请输入搜索关键词"
      class="search"
      @search="onSearch"
    >
      <template #action>
        <div @click="goBack">取消</div>
      </template>
    </van-search>
    <div class="cinema-list">
      <div v-show="searchText === ''">
        <p class="text">离你最近</p>
        <van-tag
          v-for="c in lastCinemas"
          :key="c.cinemaId"
          color="#f4f4f4"
          text-color="#191a1b"
          size="large"
          class="c-tag"
          >{{ c.name }}</van-tag
        >
      </div>
      <div v-show="searchText.length">
        <cinemaItem
          v-for="cinema in showCinemas"
          :key="cinema.cinemaId"
          :cinema="cinema"
        />
      </div>
    </div>
  </div>
</template>

<script>
import cinemaItem from "@/components/cinema-item.vue";
import jump from '@/mixins/jump';

export default {
  mixins: [jump],
  components: {
    cinemaItem,
  },
  data() {
    return {
      searchText: "",
      lastCinemas: [],
      cinemas: [],
    };
  },
  created() {
    this.getLastCity();
    this.getCinemas();
  },
  computed: {
    showCinemas() {
      return this.searchText.length
        ? this.cinemas.filter((el) =>
            (el.name + el.address).includes(this.searchText)
          )
        : this.cinemas;
    },
    cityId(){
      return this.$store.state.cityId
    }
  },
  methods: {
    onSearch() {},
    async getCinemas() {
      let res = await this.$api({
        headers: {
          "X-Host": "mall.film-ticket.cinema.list",
        },
        url: "https://m.maizuo.com/gateway",
        method: "get",
        params: {
          cityId: this.cityId,
          ticketFlag: 0,
          k: 5678404,
        },
      });
      this.cinemas = res.data.data.cinemas;
    },
    async getLastCity() {
      let res = await this.$api({
        headers: {
          "X-Host": "mall.film-ticket.cinema.recommend",
        },
        url: "https://m.maizuo.com/gateway",
        method: "get",
        params: {
          cityId: this.cityId,
          k: 673981,
        },
      });
      this.lastCinemas = res.data.data.cinemas;
    },
  },
};
</script>

<style scoped>
.cineam-search {
  background: #fff;
  height: 100vh;
}
.search {
  position: fixed;
  width: 100%;
  z-index: 99;
}
.text {
  font-size: 13px;
  line-height: 13px;
  color: #bdc0c5;
  margin: 18px 10px;
}
.c-tag {
  margin: 5px;
}
.cinema-list {
  padding: 47px 10px 50px 10px;
}
</style>
